<template>
  <div class="bookcity">
    <Header />
    <van-tabs v-model="active" class="tabs" title-active-color="#6ae0f0" color="#6ae0f0" sticky>
      <van-tab title="精选">
        <div class="selected">
          <van-swipe class="pic" :autoplay="5000" :loop="true" indicator-color="#fff">
            <van-swipe-item v-for="(image, index) in SwiperImg" :key="index">
              <div class="swipe">
                <img :src="image.name" />
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="scategory">
          <van-grid :column-num="5">
            <van-grid-item icon="good-job-o" text="推荐" @click="to2()" />
            <van-grid-item icon="like-o" text="收藏" @click="to2()" />
            <van-grid-item icon="award-o" text="评分" @click="to3()" />
            <van-grid-item icon="fire-o" text="热更" @click="to4()" />
            <van-grid-item icon="qr" text="完结" @click="to2()" />
          </van-grid>
        </div>
        <div class="Heavyweight">
          <div class="setop">
            <span class="hwtopl"></span>
            <span class="hwtop1">重磅推荐</span>
            <span class="hwtop2" @click="to2()">
              更多
              <van-icon name="arrow" />
            </span>
          </div>
          <van-swipe class="myswipe" :autoplay="1000000000" indicator-color="white">
            <van-swipe-item>
              <div class="Heavyweights" v-for="(image, id) in Hwlbone1" :key="id">
                <img :src="'bimg/'+image.name1" />
                <img :src="'bimg/'+image.name2"/>
                <img :src="'bimg/'+image.name3" />
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="Heavyweights" v-for="(image, id) in Hwlbone2" :key="+id">
                <img :src="'bimg/'+image.name1" />
                <img :src="'bimg/'+image.name2" />
                <img :src="'bimg/'+image.name3" />
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="Heavyweights" v-for="(image,id) in Hwlbone3" :key="'info2-'+id">
                <img :src="'bimg/'+image.name1" />
                <img :src="'bimg/'+image.name2" />
                <img :src="'bimg/'+image.name3" />
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="Heavyweights" v-for="(image,id) in Hwlbone4" :key="id">
                <img :src="'bimg/'+image.name1"/>
                <img :src="'bimg/'+image.name2" />
                <img :src="'bimg/'+image.name3" />
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="hotbook">
          <div class="setop">
            <span class="hwtopl"></span>
            <span class="hwtop1">火热新书</span>
            <span class="hwtop2" @click="to4()">
              更多
              <van-icon name="arrow" />
            </span>
          </div>
          <div class="hotmain">
            <bookshow v-for="(item,title) in gethot1" :key="title" :item="item" />
            <div>
              <bookshow v-for="(item,pic) in gethot2" :key="pic" :item="item" />
            </div>

            <div class="hotmbot">
              <bookmore v-for="(item,name) in Hwlbone5" :key="name" :item="item" />
            </div>
          </div>
        </div>
        <div class="hotbook">
          <div class="setop">
            <span class="hwtopl"></span>
            <span class="hwtop1">热门连载</span>
            <span class="hwtop2" @click="to3()">
              更多
              <van-icon name="arrow" />
            </span>
          </div>
          <div class="hotmain">
            <bookshow v-for="(item,name) in gethot3" :key="name" :item="item" />

            <div class="hotmbot">
              <div>
                <bookmore v-for="(item,name) in Hwlbone6" :key="name" :item="item" />
              </div>
              <bookmore v-for="(item,name) in Hwlbone7" :key="name" :item="item" />
            </div>
          </div>
        </div>
        <div class="hotbook">
          <div class="setop">
            <span class="hwtopl"></span>
            <span class="hwtop1">完本精选</span>
            <span class="hwtop2" @click="to2()">
              更多
              <van-icon name="arrow" />
            </span>
          </div>
          <div class="hotmain">
            <div class="hotmbot">
              <div>
                <bookmore v-for="(item,name) in Hwlbone8" :key="name" :item="item" />
              </div>
              <bookmore v-for="(item,name) in Hwlbone9" :key="name" :item="item" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="分类">
        <div class="classification" v-for="(image, index) in classification" :key="index">
          <div class="clone" @click="tofen(image.text)">
            <div class="clright">
              <span class="ctext">{{image.text}}</span>
              <span class="cnum">{{image.sum}}</span>
            </div>
            <div class>
              <img :src="'bimg/'+image.name" />
            </div>
          </div>
          <div class="clone" @click="tofen1(image.text1)">
            <div class="clright">
              <span class="ctext">{{image.text1}}</span>
              <span class="cnum">{{image.sum1}}</span>
            </div>
            <div class>
              <img :src="'bimg/'+image.name1" />
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="榜单">
        <div>
          <Lists v-for="(item,name) in Lists1" :key="name" :item="item" @click='to2()'/>、
        </div>
        <div>
          <Lists v-for="(item,name) in Lists2" :key="name" :item="item" @click='to3()' />
        </div>
        <div>
          <Lists v-for="(item,name) in Lists3" :key="name" :item="item" @click='to4()' />
        </div>
        <div class="bottomlist">
          <Lists v-for="(item,name) in Lists4" :key="name" :item="item" @click='to2()'/>
        </div>
      </van-tab>
      <van-tab title="书单" to="/Home">
        <div class="tops">
          <span v-for="(item, id) in list" :key="id">
            <div>
              <router-link :to="item.name">
                <!-- <span class="sj"> -->
                <div>{{item.text}}</div>
                <!-- </span>  -->
              </router-link>
            </div>
          </span>
        </div>
        <router-view />
        <!-- <div class="bList">
          <div class="bLpic">
            <img src="bimg/40401s.jpg" />
          </div>

          <div class="bLcenter">
            <p>
              <span>1</span>校花的贴身高手
            </p>
            <p>
              <span>2</span>校花的贴身高手
            </p>
            <p>
              <span>3</span>帝巅
            </p>
          </div>
          <div class="bLicon">
            <span>
              <van-icon name="arrow" />
            </span>
          </div>
        </div>-->
      </van-tab>
    </van-tabs>

    <foot />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import foot from "@/components/foot.vue";
import Header from "@/components/Header.vue";
import bookshow from "@/components/bookshow.vue";
import bookmore from "@/components/bookmore.vue";
import Lists from "@/components/Lists.vue";
import debookshow from "@/components/bookshow.vue";

export default {
  name: "Home",
  components: {
    foot,
    Header,
    bookshow,
    bookmore,
    Lists,
    debookshow,
  },
  data() {
    return {
      active: 0,
      actives: 0,
      pingfen: 0,
      SwiperImg: [
        {
          name: "bimg/lb1.jpg",
        },
        {
          name: "bimg/lb2.jpg",
        },
        {
          name: "bimg/lb3.jpg",
        },
      ],
      gethot3: [
        {
          // pic: "40674.jpg",
          // title: "修仙界最后的单纯",
          // category: "武侠修仙",
          // chapter: "太上布衣类",
          // main:
          //   "臭名昭着的死刑犯，死后来到一个陌生的世界。这里没有四个轮子的奔驰，有四个蹄子的宝马。天上没有飞机，有在天上飞的仙人。没有手机电话也没关系，有千里传音……这个世界..",
          // ather: "跃千愁",
          // state: "连载",
          // zj: "第三千六百一十二章",
          // score: "9.2",
        },
      ],
      gethot1: [
        {
          // pic: "hr7.jpg",
          // title: "我真的在打篮球",
          // category: "都市生活",
          // chapter: "临河羡鱼翁动作",
          // main:
          //   "臭名昭着的死刑犯，死后来到一个陌生的世界。这里没有四个轮子的奔驰，有四个蹄子的宝马。天上没有飞机，有在天上飞的仙人。没有手机电话也没关系，有千里传音……这个世界..",
          // ather: "跃千愁",
          // state: "连载",
          // zj: "第三千六百一十二章",
          // score: "9.2",
        },
      ],
      gethot2: [
        {
          // pic: "hr8.jpg",
          // title: "我的女友不可能是怪物",
          // category: "灵异恐怖",
          // ather: "黑暗荔枝动",
          // main:
          //   "臭名昭着的死刑犯，死后来到一个陌生的世界。这里没有四个轮子的奔驰，有四个蹄子的宝马。天上没有飞机，有在天上飞的仙人。没有手机电话也没关系，有千里传音……这个世界..",
          // zj: "第三千六百一十二章",
          // athor: "黑暗荔枝动",
          // state: "连载",
          // score: "9.2",
        },
      ],

      Lists1: [
        {
          // id: 1,
          // title1: "武炼巅峰",
          // title2: "最强兵王",
          // title3: "绝品邪少",
          // Lists: "热门榜单",
          // name1: "bimg/hw1.jpg",
          // name2: "bimg/hw2.jpg",
          // name3: "bimg/hw3.jpg",
        },
      ],
      Lists2: [
        {
          // id: 2,
          // title1: "至尊法师",
          // title2: "庆余年",
          // title3: "汉乡",
          // Lists: "完结榜单",
          // name1: "bimg/hw4.jpg",
          // name2: "bimg/hw5.jpg",
          // name3: "bimg/hw6.jpg",
        },
      ],
      Lists3: [
        {
          // id: 3,
          // title1: "三寸人间",
          // title2: "圣墟",
          // title3: "道君",
          // Lists: "收藏榜单",
          // name1: "bimg/hw7.jpg",
          // name2: "bimg/hw8.jpg",
          // name3: "bimg/hw9.jpg",
        },
      ],
      Lists4: [
        {
          // id: 4,
          // title1: "一念永恒",
          // title2: "异能狂妻",
          // title3: "从斗罗大陆开始的人生赢家",
          // Lists: "推荐榜单",
          // name1: "bimg/hw10.jpg",
          // name2: "bimg/hw11.jpg",
          // name3: "bimg/hw12.jpg",
        },
      ],
      Hwlbone1: [],
      Hwlbone2: [],
      Hwlbone3: [],
      Hwlbone4: [],
      Hwlbone5: [],
      Hwlbone6: [],
      Hwlbone7: [],
      Hwlbone8: [],
      Hwlbone9: [],
      classification: [
        // {
        //   text: "都市超能",
        //   sum: 19023,
        //   name: "bimg/hr13.jpg",
        //   text1: "都市生活",
        //   sum1: 20431,
        //   name1: "bimg/hr19.jpg",
        // },
        // {
        //   text: "东方玄幻",
        //   sum: 29023,
        //   name: "bimg/hr20.jpg",
        //   text1: "武侠修仙",
        //   sum1: 20431,
        //   name1: "bimg/hr5.jpg",
        // },
        // {
        //   text: "恐怖灵异",
        //   sum: 19023,
        //   name: "bimg/hr8.jpg",
        //   text1: "科幻小说",
        //   sum1: 20431,
        //   name1: "bimg/hr14.jpg",
        // },
      ],
      list: [
        { name: "/Home", id: "1", text: "最新发布" },
        { name: "/Home/Hottest", id: "2", text: "本周最热" },
        { name: "/Home/Collection", id: "3", text: "最多收藏" },
        { name: "/Home/Recommend", id: "4", text: "主编推荐" },
      ],
    };
  },
  methods: {
    changeStyle(index) {
      this.active = index; //实现第一种效果只需要这句代码  实现第二种效果就要加上外面的判断条件
    },
    to3() {
      // console.log(index)
      this.pingfen = 3;
      this.$router.push({
        path: "/exom",
        query: {
          id: this.pingfen,
        },
      });
    },
    to2() {
      // console.log(index)
      this.pingfen = 2;
      this.$router.push({
        path: "/exom",
        query: {
          id: this.pingfen,
        },
      });
    },
    to4() {
      // console.log(index)
      this.pingfen = 4;
      this.$router.push({
        path: "/exom",
        query: {
          id: this.pingfen,
        },
      });
    },
    tofen(index) {
      console.log(index);
      this.$router.push({
        path: "/exom",
        query: {
          id: index,
        },
      });
    },
    tofen1(index) {
      // console.log(index)
      console.log(index);
      this.$router.push({
        path: "/exom",
        query: {
          id: index,
        },
      });
    },
  },
  mounted() {
    // 首页多排
    this.$axios.get("/api/books").then((data) => {
      var image = data.data;
      // console.log(image)
      // image.forEach((item) => {
      //   item.pic =  item.pic;
      // });

      // console.log(image);
      // this.Hwlbone5 = image;
      this.Hwlbone5 = JSON.parse(image[0].mains);
      this.Hwlbone6 = JSON.parse(image[1].mains);
      this.Hwlbone7 = JSON.parse(image[2].mains);
      this.Hwlbone8 = JSON.parse(image[3].mains);
      this.Hwlbone9 = JSON.parse(image[4].mains);
      // console.log(this.Hwlbone5)
    });

    // 榜单
    this.$axios.get("/api/list").then((data) => {
      var image = data.data;
      // console.log(image)
      // image.forEach((item) => {
      //   item.pic = "bimg/" + item.pic;
      // });

      console.log(image);
      this.Lists1 = JSON.parse(image[0].Lists);
      this.Lists2 = JSON.parse(image[1].Lists);
      this.Lists3 = JSON.parse(image[2].Lists);
      this.Lists4 = JSON.parse(image[3].Lists);
      console.log(this.Lists1);

      // console.log(this.Hwlbone5)
    });

    // 轮播图片
    this.$axios.get("/api/lbs").then((data) => {
      var image = data.data;
      console.log(image);
      // image.forEach((item) => {
      //   item.pic = "bimg/" + item.pic;
      // });

      // console.log(image);
      // this.Hwlbone5 = image;
      this.Hwlbone1 = JSON.parse(image[0].lb1);
      this.Hwlbone2 = JSON.parse(image[1].lb1);
      this.Hwlbone3 = JSON.parse(image[2].lb1);
      this.Hwlbone4 = JSON.parse(image[3].lb1);
      // this.Hwlbone9 = JSON.parse(image[4].mains);
      // console.log(this.Hwlbone5)
    });

    // 首页单个
    this.$axios.get("/api/sy").then((data) => {
      var image = data.data;
      console.log(image);
      // console.log(image);
      // this.Hwlbone5 = image;
      this.gethot1 = JSON.parse(image[0].gethot);
      this.gethot2 = JSON.parse(image[1].gethot);
      this.gethot3 = JSON.parse(image[2].gethot);
      // this.Hwlbone4 = JSON.parse(image[3].lb1);
      // this.Hwlbone9 = JSON.parse(image[4].mains);
      // console.log(this.Hwlbone5)
    });

    // 分类
     this.$axios.get("/api/classification").then((data) => {
      var image = data.data;
      console.log(image);
      this.classification=image
    });

  },
  beforeUpdate() {},
};
</script>

<style scoped>
/* 书单里页面跳转 */
.tabs {
  position: relative;
  top: 1.25rem;
  background-color: #fff;
  
}
.tops {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  height: 1.25rem;
  font-size: 0.2rem;
  background-color: #fff;
  border-bottom: 2px solid rgba(187, 182, 182, 0.822);
}
.tops span {
  width: 3rem;
  padding-bottom: 0.2rem;
  box-sizing: border-box;
  /* border-bottom: 2px solid rgba(187, 182, 182, 0.822); */
}
.actives {
  color: #00e6e6;
  border-bottom: 2px solid #e50000 !important;
}

.swipe img {
  width: 100%;
  height: 4.6rem;
}
/* 精选 */
.Heavyweights {
  display: flex;
  justify-content: space-around;
}

.Heavyweights img {
  width: 22%;
  height: 3rem;
}
.myswipe {
  padding-bottom: 0.3rem;
}
.setop {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  overflow: hidden;
  border-top: 0.1rem solid #0000001c;
}

.hwtopl {
  float: left;
  height: 0.4rem;
  width: 0.1rem;
  background-color: #60cfeb;
  margin-left: 0.4rem;
  margin-top: 0.2rem;
}

.hwtop1 {
  font-size: 0.4rem;
  font-weight: 600;
  float: left;
  margin-left: 0.3rem;
}

.hwtop2 {
  font-size: 0.1rem;
  float: right;
  margin-right: 0.3rem;
}
.hwtext {
  position: relative;
  top: 2rem;
}

.hotmtop {
  width: 100%;
  height: 3.5rem;
  display: flex;
  justify-content: space-around;
}

.hotmtop img {
  width: 25%;
  height: 3.2rem;
}
/* 分类 */
.classification {
  display: flex;
  height: 3rem;
  justify-content: space-evenly;
  align-content: space-around;
  flex-wrap: wrap;
}
.clone {
  display: flex;
  /* justify-content: space-around; */
  float: left;
  width: 40%;
  height: 2.5rem;
  box-shadow: 1px 1px 1px 1px;
  border-radius: 5px;
  position: relative;
  top: 0.3rem;
}
.clone img {
  height: 2.5rem;
  margin-left: 0.4rem;
}
.clright {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 0.1rem;
}
.ctext {
  font-size: 0.4rem;
  font-weight: 500;
}
.cnum {
  color: #60cfeb;
  font-size: 0.3rem;
}
/* 榜单 书单 */
.bList,
.List {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 0.01rem solid rgb(209, 201, 201);
}
.List img {
  height: 2.5rem;
  width: 70%;
}
.bList img {
  height: 2.5rem;
  width: 70%;
}
.bLpic,
.Lpic {
  display: flex;
  width: 30%;
  flex-direction: column;
}
.bLcenter,
.Lcenter {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40%;
}
.bLicon,
.Licon {
  align-self: center;
}
/* 广告 */
.advant {
  width: 100%;
  height: 3rem;
  margin-top: 6rem;
  background-color: #000;
}
.hotmain {
  height: 8rem;
  padding-bottom: 1.8rem;
}
/*  */
.van-grid-item__icon {
  font-size: 28px;
  color: #6cd0da;
}
.bottomlist {
  padding-bottom: 1.25rem;
}
.van-tabs__wrap {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
</style>
